<!DOCTYPE html>
<html lang="en">

<head>
    <!-- bootstrap -->
    <!-- vue + element ui + node.js -->
    <!-- 金旭亮 -->
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css">
    <title>Photos To Brief Strokes</title>
    <script type="text/javascript" src="/static/js/jquery-3.6.0.min.js"></script>
    <style type="text/css">
        .main {
        }

        .left {
            background-color: #FFF8DC;
            height: 450px;
            width: 730px;
            margin: 0px;
            margin-left: 40px;
            border-radius: 40px;
        }

        .right {
            background-color: #FFF8DC;
            height: 450px;
            width: 730px;
            margin: 0px;
            margin-right: 40px;
            border-radius: 40px;
        }

        .thumb-image {
            width: 650px;
            height: 400px;
            position: absolute;
            left: 19px;
            top: 175px;
            padding: 40px;
        }

        #img {
            width: 650px;
            height: 400px;
            position: absolute;
            right: 19px;
            top: 175px;
            padding: 40px;
        }
    </style>
</head>

<body id="body">
<h1 style="font-size:55px">Photos To Brief Strokes</h1>
<div id="wrapper" style="margin-top: 30px; margin-left: 40px;">
    <form id="form1" enctype="multipart/form-data" method="post">
        <label for="fileToUpload" style="color:white;font: size 12px;">Please upload photos with portraits</label>
        <input type="file" name="fileToUpload" id="fileToUpload">
    </form>
</div>
<div id="image-holder"></div>
<div id="main" style="width:100%;">
    <div class="left" style="width:45%;float:left;"></div>
    <div class="right" style="width:45%;float:right;"></div>
</div>
<img id="img"/>
<div id="end" style="text-align:center;margin: 40px">
    <button class="button" type="button" name="upload" id="upload" style="margin-top: 20px;">Upload and deal</button>
</div>
<body background="/static/2.jfif" style=" background-repeat:no-repeat ;background-size:100% 100%; background-attachment:fixed;"></body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#fileToUpload").on('change', function () {
            if (typeof (FileReader) != "undefined") {
                var image_holder = $("#image-holder");
                image_holder.empty();

                var reader = new FileReader();
                reader.onload = function (e) {
                    $("<img />", {
                        "src": e.target.result,
                        "class": "thumb-image"
                    }).appendTo(image_holder);

                }
                image_holder.show();
                reader.readAsDataURL($(this)[0].files[0]);
            } else {
                alert("This browser does not support FileReader.");
            }
        });
    });

    $("#upload").click(function () {
        var file = $("#fileToUpload")[0].files[0];
        var formData = new FormData();
        formData.append("image", file)
        $.ajax({
            url: "http://127.0.0.1:5000",
            type: "POST",
            data: formData,
            dataType: "json",
            processData: false,
            contentType: false,
            headers: {
                "Access-Control-Allow-Origin": "*",
            },
            success: function (response) {
                console.log(response);
                length = response["length"];
                remote = "http://127.0.0.1:5000";
                for (let i = 0; i < length; i++) {
                    let path = remote + response[0];
                    console.log(path)
                    $("#img").attr("src", path);
                }
            },
        });
    });
</script>

</body>
</html>